<template>
  <div>
    <el-row>
      <Nav></Nav>
    </el-row>
    <el-container class="menuContent">
      <el-aside width="300px" class="aside">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <!-- <div class="overview_zlist_sy"> -->
          <ul class="overview_zlist">
            <li v-for="item in devlist" :key= "item.index" 
            :class="overList == item.backName ? 'active' : '' " 
            @click="toRouter(item.backName,item.type)"
            >
              <svg aria-hidden="true" class="icon card_icon">
                <use :xlink:href="item.icon" />
              </svg>
              <p>{{item.typename}}</p>
            </li>
            <li  v-if="this.show !== 'false'"
            :class="overList == 'shipin' ? 'active' : '' " 
            @click="toRouter('shipin')"
            >
              <svg aria-hidden="true" class="icon card_icon">
                <use xlink:href="#icon-jiankong-copy" />
              </svg>
              <p>视频监控</p>
            </li>
            <li v-if="this.show1 !== 'false'"
            @click="toRouter('video')"
            >
              <svg aria-hidden="true" class="icon card_icon">
                <use xlink:href="#icon-jiankong-copy" />
              </svg>
              <p>视频软件
              </p>
            </li>
            <li v-if="this.show2 !== 'false'"
            @click="toRouter('doors')"
            >
              <svg aria-hidden="true" class="icon card_icon">
                <use xlink:href="#icon-menjinguanli" />
              </svg>
              <p>门禁软件
              </p>
            </li>
          </ul>
        <!-- </div> -->
        <div class="overview_list_bk">
          <div :class="(this.sbType == 15 ||this.sbType == 16 ||this.sbType == 18 ||this.sbType == 19 ||this.sbType == 20 
          ||this.sbType == 23) ? 'overview_list_close overview_list_close2':'overview_list_close'"  @click="listClose()">
            <p class="overview_list_title">
              <svg class="icon view_icon" aria-hidden="true">
                  <use :xlink:href="this.sbIcon"></use>
              </svg>
              {{ this.sbName }}
            </p>
            <div class="sbimg" v-if="this.sbType == 1">
              <img src="../assets/overview/818.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 2">
              <img src="../assets/overview/120s.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 3">
              <img src="../assets/overview/120A.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 4">
              <img src="../assets/overview/airclean.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 5">
              <img src="../assets/overview/airfilter.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 6">
              <img src="../assets/overview/mouse.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 7">
              <img src="../assets/overview/cleantable.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 8">
              <img src="../assets/table.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 9">
              <img src="../assets/cleanbox.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 10">
              <img src="../assets/overview/deac.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 11">
              <img src="../assets/overview/light.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 12">
              <img src="../assets/humi.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 13">
              <img src="../assets/humi.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 14">
              <img src="../assets/overview/disinfect.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 17">
              <img src="../assets/overview/k8s.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 21">
              <img src="../assets/humi.png" alt="">
            </div>
            <div class="sbimg" v-if="this.sbType == 24">
              <img src="../assets/overview/power.png" alt="">
            </div>
            <div class="overview_list_closecon">
              <i class="list_icon el-icon-arrow-down"></i>
            </div>
          </div>
          <div class="overview_list_control">
            <div class="overview_list_dev"   @click="change(item, index)" v-for="(item, index) in sbTitle" :key="item.index"  :class='{ active:index===number}'>
              <p>{{item.name}}</p>
              <div class="overview_list_dev_line"></div>
            </div>
          </div>
        </div>
      </el-aside>
       
      <el-main class="mainSection">
        <span v-if="this.Grade !== '2'">
        <span  v-if="this.isMobile !== 'mobile'" >
        <span  v-if="this.overList !== 'shipin'">
        <el-button class="overSetBut" @click="setOverFun()" v-if="(this.Grade == '普通管理员' || this.Grade == '高级管理员') && this.overList !=  '' && this.overList != 'undefined'">设置</el-button>
        </span>
        </span>
        </span>
        <component :is="overList" :key='indexKey' ref="child" v-if="this.overList != 'undefined'"/>
      </el-main>
    </el-container>
    <!-- 设置设备页 公共通用 -->
    <!-- 
        解决对话框重新打开数据不会重新加载的方法
        外层套一个div 使用v-if来控制显示隐藏
     -->
    <div style="height: 100%;" v-if="overviewSet">
      <div v-if="overviewSet" class="edit_tan">
        <div class="config_set">
          <div class="edit_close" @click="closeDialog()">X</div>
          <OverSet :msg= 'overList' :type = "type"></OverSet>
        </div>
      <!-- <el-dialog
      :visible.sync="overviewSet"
      :append-to-body="true"
      id="eldialog"
      :modal="true"
      width="85%"
      height="80%"
      class="overviewSetModel"
      @close = 'closeDialog()'>
          
      </el-dialog> -->
        
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import OverSet from "../components/overview/setOverview";
import Nav from "../components/index/navbar"
import Ac from "../components/overview/ac";
import Cleanbox from "../components/overview/cleanbox";
import Airclean from "../components/overview/airclean";
import Mouse from "../components/overview/mouse";
import Xtg401 from "../components/overview/xtg401";
import Xtg402 from "../components/overview/xtg402";
import Xtg403 from "../components/overview/xtg403";
import Temp from "../components/overview/tempW";
import K8s from "../components/overview/k8s";
import Cleantable from "../components/overview/cleantable";
import Airfilter from "../components/overview/airfilter";
import Normal from "../components/overview/normal";
import Humi from "../components/overview/humi";
import HumiA from "../components/overview/humia";
import Deac from "../components/overview/deac";
import Shipin from "../components/overview/shipin";
import Tablebox from "../components/overview/table";
import Airlite from "../components/overview/airlite";
import Filterlite from "../components/overview/filterlite";
import Irf818 from "../components/overview/irf818";
import K8s_501 from "../components/overview/crk_s6";
import Light from "../components/overview/light";
import Disinfect from "../components/overview/disinfect";
import Wind from "../components/overview/wind";
import Power from "../components/overview/power";

export default {
  components: {OverSet, Ac, Nav, Cleanbox,Airfilter, Mouse, Temp,Xtg401, Xtg402, Xtg403,
              K8s, Cleantable, Airclean, Tablebox, Normal, Humi, HumiA, Deac, Shipin,Airlite,Filterlite,Irf818,K8s_501,Light,Disinfect,Wind,Power},
  inject: ['reload'],
  data() {
    return {
      show: localStorage.getItem('video'),
      show1: localStorage.getItem('videos'),
      show2: localStorage.getItem('doors'),
      menuList: "",
      overList: "",
      type:'',
      isMobile: '',
      Grade: '',
      indexKey:0,
      overviewSet: false, //设置页面弹框
      devlist:[],
      airTitle:[],
      number: 0,
      sbName:'',
      sbType:'',
      sbIcon:'',
      sbTitle:'',
      sizenum:0,//时间计数
      repnum:3,//重复时间秒
      repeatnum:0,//失败访问次数
      timeGetData:'',//计时定时器
      timeGetData2:'',
      changedata:0,
      sidemenu : [
        {
            typename:'',//空调遥控器
            type:1,
            backName:"irf818",
            icon: '#icon-jiejingji-copy'
        },
        
        {
            typename:'恒湿机120/120s',
            type:2,
            backName:'humi',
            icon: '#icon-lishikongtiao'
        },{
            typename:'恒湿机120a',
            type:3,
            backName:'humiA',
            icon: '#icon-lishikongtiao'
        },
        {
            typename:'霉菌机',
            type:4,
            backName:"airclean",
            icon: '#icon-mokuai'
        },
        {
            typename:'新风机',
            type:5,
            backName:"airfilter",
            icon: '#icon-xinfeng1'
        },
        {
            typename:'驱鼠器',
            type:6,
            backName:"mouse",
            icon: '#icon-laoshu'
        },
        {
            typename:'净化整理台',
            type:7,
            backName:"cleantable",
            icon: '#icon-dianshigui1'
        },
        {
            typename:'整理台',
            type:8,
            backName:"Tablebox",
            icon: '#icon-zhenglitai'
        },
        {
            typename:'净化柜',
            type:9,
            backName:"cleanbox",
            icon: '#icon-icon_airconditioning-copy'
        },
        {
            typename:'除酸机',
            type:10,
            backName:"deac",
            icon: '#icon-lishikongtiao'
        },{
            typename:'灯光门禁控制器',
            type:11,
            backName:"light",
            icon: '#icon-shebeileishebei44'
        },
        {
            typename:'RFID风淋通道',
            type:12,
            backName:"wind",
            icon: '#icon-tongdao'
        },
        {
            typename:'智能排水站',
            type:13,
            backName:"water",
            icon: '#icon-shuichang'
        },
        {
            typename:'净化舱',
            type:14,
            backName:"disinfect",
            icon: '#icon-armoire'
        },
        {
            typename: '红外主机',
            type: 15,
            backName:'infrared',//跳转路径
            icon: '#icon-duanluqigui'
        },
        {
            typename: '通用模块',
            type: 16,
            backName:'normal',//跳转路径
            icon: '#icon-duanluqigui'
        },
        {
            typename:'',//简版/云测仪
            type:17,
            backName:'k8s',
            icon: '#icon-huanjingjiance'
        },
        {
            typename: '空调',
            type: 18,
            backName:'ac',//跳转路径
            icon: '#icon-kongtiao1'
        },
        {
            typename:'温湿度(T100)',
            type:19,
            backName:'temp',
            icon: '#icon-icon_wenshidutanceqi'
        },
        {
            typename:'空气监测(外置)',
            type:20,
            backName:"k8s_501",
            icon: '#icon-huanjingjiance'
        },
        {
            typename:'继电器输出',
            type:22,
            backName:'xtg402',
            icon: '#icon-jiedian'
        },               
        {
            typename:'干接点监测',
            type:23,
            icon: '#icon-jiedian', 
            backName:'xtg403'
        },
        {
            typename:'电源管理箱',
            type:24,
            backName:'power',
            icon: '#icon-shebeizhuangtai'
        }, {
            typename:'数据采集器',
            type:25,
            backName:'xtg401',
            icon: '#icon-jiedian'
        },
      ]
    };
  },
  computed: {
  },
  created() {
    // this.menuList = Object.keys(JSON.parse(localStorage.getItem("cardData")));
    this.isMobile = localStorage.getItem("当前终端");
    this.Grade = localStorage.getItem("当前用户权限")
    this.default()
    this.getlist()
    this.getlayout()
  },
  methods: {
    getlayout(){
      var params2 = {
          "getlayout":"layout1",
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params2).then((res) => {
          if(res.data.layout1 != undefined){
            localStorage.setItem('累计时长',res.data.layout1.devtimeshow)  
          }
      })
    },
    //获取列表
    getlist(){
      // 接口访问失败逻辑循环：3秒无返回认定接口失败，并重新访问接口，以上情况下接口循环访问达到5次后，接口循环重新访问时间延长到15秒一次，接口访问成功后该方法自动重置
      var size;
      this.$nextTick(() => {
        this.timeGetData = setInterval(() => {
          if(this.sizenum >= this.repnum){ //达到3000ms延迟等待结果未返回
            clearInterval(this.timeGetData); //清除定时器
            this.timeGetData = null; //清除定时器
            this.sizenum = 0 //时间计数重置
            if(size == undefined){ //接口没有拿到返回
                this.$message({
                  message: '服务器访问失败',
                  type: 'error',
                  duration: 1000
                });
              this.repeatnum++ //失败访问次数累计
              if(this.repeatnum >= 4){ // 第五次接口访问失败后，接口访问频率改成15秒（12+3）
                this.repnum = 15 //重复时间频率增大
                this.getlist()
              }else{
                this.getlist() //重新访问接口
              }
            }else{
              this.repeatnum = 0 //失败访问次数重置
            }
          }else{
            this.sizenum++; //时间累计
          }
        }, 1000); 
      })
      // -----------------------------
      var params = {
          "getdevlist":"",
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
          // 接口失败重复逻辑相关
          size = res.data.getdevlist;
          this.repnum = 3 //重复时间频率变回3000ms
          // -----------
          var list = res.data.getdevlist;
          this.airTitle = list
          var se = 0
          this.devlist = []
          var str = []
          for(var e = 0; e < this.sidemenu.length; e++){//循环顺序列表
            for(var i = 0; i < list.length; i++){//循环接口列表
              if(list[i].devlink.length > 0 && list[i].type != 31 && list[i].type != 32){//屏蔽掉31 32无线网关模块设备
                if(list[i].type == this.sidemenu[e].type){
                  var arr = {
                    type:list[i].type,
                    typename:list[i].typename,
                    icon:this.geticon(list[i].type),
                    backName:this.getbackName(list[i].type),
                  }
                  this.devlist.push(arr)
                }
              }
            }
          }
          if(JSON.parse(localStorage.getItem("当前设备编号")) == undefined){//缓存中没有默认设备
            for(var b = 0; b < list.length; b++){
              if(list[b].devlink.length > 0 && list[b].type != 31 && list[b].type != 32){//屏蔽掉31 32无线网关模块设备
                str.push(list[b])
              }
            }
          }else{
            // setTimeout(() => {
            //   this.$refs.child.getData(JSON.parse(localStorage.getItem("当前设备编号")))
            // }, 100);
            for(var b = 0; b < list.length; b++){
              if(list[b].devlink.length > 0 && list[b].type != 31 && list[b].type != 32){//屏蔽掉31 32无线网关模块设备
                str.push(list[b])
                for(var a = 0; a < list[b].devlink.length; a++){
                  if(JSON.parse(localStorage.getItem("当前设备编号")).uid == list[b].devlink[a].uid){ //缓存中有默认设备，但是实际列表中找不到
                    se++
                  }
                }
              }
            }
          }
          if(str.length == 0){
            localStorage.setItem('menuRouter', 'undefined')
            this.default()
          }else{
            if(se == 0){
              var arr = {
                name: str[0].devlink[0].name,
                uid: str[0].devlink[0].uid,
                addr:str[0].devlink[0].addr,
                type:str[0].type
              }
              localStorage.setItem('当前设备编号', JSON.stringify(arr))
              var mmm = ''
              for(var b = 0; b <this.sidemenu.length;b++){
                if(this.sidemenu[b].type == list[0].type){
                  mmm = this.sidemenu[b].backName
                }
              }
              localStorage.setItem('menuRouter', mmm)
              this.default()
            }else{
              var mmm = ''
              for(var b = 0; b <this.sidemenu.length;b++){
                if(this.sidemenu[b].type == JSON.parse(localStorage.getItem("当前设备编号")).type){
                  mmm = this.sidemenu[b].backName
                }
              }
              localStorage.setItem('menuRouter', mmm)
              this.default()
            }
          }
          
      })
    },
    default(){
      // var arr = JSON.parse(localStorage.getItem("当前设备编号"))
      // this.toRouter()
      this.overList = localStorage.getItem("menuRouter");
      if(this.overList != 'undefined' && this.overList != undefined){
        setTimeout(() => {
          this.$refs.child.getData(JSON.parse(localStorage.getItem("当前设备编号")))
        }, 100);
      }
    },
    //获取列表对应图标
    geticon(type){
      for(var i = 0; i < this.sidemenu.length;i++){
        if(this.sidemenu[i].type == type){
          return this.sidemenu[i].icon
        }
      }
    },
    getbackName(type){
      for(var i = 0; i < this.sidemenu.length;i++){
        if(this.sidemenu[i].type == type){
          return this.sidemenu[i].backName
        }
      }
    },
    //路由跳转
    toRouter(val,type) {
       if(val == 'doors' || val =='video'){
            window.opencmd(val)
            return
        } else {
          $('.overview_zlist').css('opacity','0')
          $('.overview_list_bk').css('top','0')
          for(var i = 0; i < this.airTitle.length; i++){
            if(this.airTitle[i].type == type){
              this.sbName = this.airTitle[i].typename
              for(var s = 0; s < this.sidemenu.length; s++){
                if(this.airTitle[i].type == this.sidemenu[s].type){
                  this.sbIcon = this.sidemenu[s].icon
                  this.sbType = this.sidemenu[s].type
                }
              }
              var arr = {
                name: this.airTitle[i].devlink[0].name,
                uid: this.airTitle[i].devlink[0].uid,
                addr:this.airTitle[i].devlink[0].addr,
                type:this.airTitle[i].type
              }
              localStorage.setItem('当前设备编号', JSON.stringify(arr))
            }
          }
          localStorage.setItem("menuRouter", val)
          this.overList = localStorage.getItem("menuRouter");
          this.sbTitle = ''
          setTimeout(() => {
            // 当前选择设备筛选{}
            var arry = []
            for(var i = 0; i < this.airTitle.length; i++){
              if(this.airTitle[i].type == type){
                for(var a = 0; a < this.airTitle[i].devlink.length; a++){
                  var arr = {
                    name: this.airTitle[i].devlink[a].name,
                    uid: this.airTitle[i].devlink[a].uid,
                    addr:this.airTitle[i].devlink[a].addr,
                    type:type
                  }
                  arry.push(arr)
                }
              }
            }
            // 
            this.sbTitle = arry
            if(this.sbTitle.length > 0){
              var num = 0
              var bh = JSON.parse(localStorage.getItem('当前设备编号'))
              for(var b = 0; b < this.sbTitle.length; b++){
                if((bh.uid == this.sbTitle [b].uid) && (bh.addr == this.sbTitle[b].addr)){
                  num++
                  this.change(JSON.parse(localStorage.getItem('当前设备编号')), b) //自动定位并高亮上次点击的设备
                }
              }
              if(num == 0){
                bh = this.sbTitle[0]
                localStorage.setItem("当前设备编号", JSON.stringify(bh))
                this.change(JSON.parse(localStorage.getItem('当前设备编号')), 0) //自动定位上次点击的设备
              }
            }
          }, 50);
          
        }
    },
    change(val, index) {
      // console.log('刷新0')
      localStorage.setItem("当前设备编号", JSON.stringify(val))
      if(this.$refs.child == undefined){
        // console.log('刷新1')
        this.timeGetData2 = setInterval(() => {
          this.changedata++
          if(this.changedata > 1000){
            this.$message({
              message: '网络访问失败',
              type: 'error',
              duration: 2000
            });
            this.changedata = 0
            clearInterval(this.timeGetData2)
            this.timeGetData2 = null;
          }else{
            if(this.$refs.child == undefined){ 
            }else{
              clearInterval(this.timeGetData2)
              this.timeGetData2 = null;
              this.changedata = 0
              this.indexKey++;
              this.$refs.child.getData(val)
            }
          }
        }, 10);
      }else{
        // console.log('刷新2')
        this.indexKey++;
        this.$refs.child.getData(val)
      }
      this.number = index;  
    },
    //关闭子级菜单弹框
    listClose(){
      $('.overview_zlist').css('opacity','1')
      $('.overview_list_bk').css('top','1000px')
    },
    // 设备设置按钮
    setOverFun () {
      this.overviewSet = true;
      this.type = JSON.parse(localStorage.getItem("当前设备编号"))
      // 缩放适配
      // setTimeout(() => {
      //   this.renderDisplay();
      //   (window.onresize = () => {
      //     this.renderDisplay();
      //   })
      // }, 10);
      
    },
    //关闭弹框的事件
    closeDialog(){
      // this.$refs.child.getData()
      this.overviewSet = false
    },

  },
   // 清除定时器
   beforeDestroy() {
      clearInterval(this.timeGetData);
      this.timeGetData = null;
      clearInterval(this.timeGetData2)
      this.timeGetData2 = null;
  }
};
</script>

<style scoped>
.edit_tan{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0000007a;
    top: 0px;
    left: 0;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    z-index: 2;
}
.config_set{
    width: 1490px;
    height: 915px;
    background: #677591;
    position: relative;
    margin-top: 40px;
    padding: 50px 50px;
}
.edit_close{
    position: absolute;
    top: 16px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 1px solid #fff;
    border-radius: 100%;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
    color: #fff;
}
.el-container {
  width: 100%;
}
.menuContent {
  color: #fff;
}
.menuContent ul li {
  width: 50%;
  float: left;
  list-style: none;
  height: 100px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid rgba(89, 129, 165, 0.6);
}
.menuContent ul li.active {
  background: rgba(89, 129, 165, 0.6);
}
.menuContent ul li .icon {
  font-size: 26px;
  margin-bottom: 4px;
  margin-top: 25px;
}
.aside {
  box-sizing: border-box;
  border: 1px solid rgba(89, 129, 165, 0.6);
}
.menuContent ul li:nth-child(odd) {
  box-sizing: border-box;
  border-right: 1px solid rgba(89, 129, 165, 0.6);
}
/* @media (any-hover: hover) {
  .menuContent ul li:hover {
    cursor: pointer;
    background: rgba(89, 129, 165, 0.6);
    transition: all 0.4s;
  }
} */
.menuContent ul li:hover {
    cursor: pointer;
  }
.aside {
  position: relative;
  background: rgba(89, 129, 165, 0.2);
  height:990px;
  overflow: hidden;
}
.aside span:nth-child(1) {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 1px 0 0 1px;
}
.aside span:nth-child(2) {
  position: absolute;
  right: 0;
  top: 0;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 1px 1px 0 0;
}
.aside span:nth-child(3) {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 0 1px 1px 0;
}
.aside span:nth-child(4) {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 0 0 1px 1px;
}
.mainSection{
    position: relative;
    border: 1px solid rgba(89, 129, 165, 0.8);
    margin: 0px 0px 0px 15px;
    height: 990px;
    background:  rgba(89, 129, 165, 0.2);
    overflow: hidden;
}
/deep/ .el-dialog .el-dialog__title{
  color: #fff !important;
}
.overSetBut{
  background: rgba(89, 129, 165, 0.6);
  border: 1px solid rgba(89, 129, 165, 0.6);
  color: #fff;
  position: absolute;
  right: 30px;
  top: 29px;
  z-index: 999;
}
/deep/ .el-dialog{
  margin-top: 2vh !important;
  height: 94%;
}
/deep/ .el-dialog__body{
    height: 94% !important;
}
/* .overviewSetModel{
  
} */
@media (any-hover: hover) {
  .el-button:focus, .el-button:hover {
      color: #409eff;
      border: 1px solid rgba(89, 129, 165, 0.6);
      background: rgba(89, 129, 165, 0.6);
  }
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
}
/* .overview_zlist_sy{
  height: 960px;
} */
.overview_zlist{
  display: inline-block;height: 990px;overflow-y: scroll; width:100%;padding-bottom:50px;transition: opacity 1s;
}
/* 子级菜单框 */
.overview_list_bk{
  position: absolute;
  width: 100%;
  height: 990px;
  background: rgba(89, 129, 165, 0.1);
  z-index: 999;
  left: 0;
  top: 1000px;
  transition: top 1s;
  /* display: none; */
}
.sbimg{
  height: 100px;
  margin-top: 10px;
}
.sbimg img{
  height: 100%;
}
.overview_list_close{
  height: 205px;
  width: 100%;
  padding-top: 5px;
  text-align: center;
  border-bottom: 1px solid #fff;
  color: #98d7ff;
  font-weight: bold;
  background: rgba(89, 129, 165, 0.3);
  cursor: pointer;
}
.overview_list_close2{
  height: 100px;
}
.overview_list_closecon{
  width: 100%;
  margin-top: 5px;
}
.overview_list_close2 .overview_list_closecon{
  margin-top: 15px;
}
.list_icon{
  transition:font-size .5s;
  font-size: 30px;
}
.overview_list_close:hover .list_icon{
  font-size: 35px;
  color: #98d7ff;
}
.overview_list_title{
  font-size: 18px;
  padding-top: 20px;
}
.view_icon{
  font-size: 22px;
}
.overview_list_control{
  height: 847px;
  overflow-y: scroll;
}

.overview_list_dev{
  width: 100%;
  height: 65px;
  padding: 0px 30px;
  padding-top: 20px;
  cursor: pointer;
  transition:background-color 0.5s;
}
.active{
  color:#98d7ff;
}
.overview_list_dev:last-child{
  border-bottom: 1px solid #fff;
}
.overview_list_dev:hover{
  background-color: rgba(89, 129, 165, 0.2);
}
.overview_list_dev p{
  width: 100%;
  padding: 0px 5px;
  overflow: hidden;
}
.overview_list_dev_line{
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  border-bottom: 1px dashed #fff;
}
.overview_list_dev:last-child .overview_list_dev_line{
  border-bottom: none;
}
</style>